<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>充值中心-思多客</title>
    <link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/public/css/m/public.css">
    <link rel="stylesheet" href="/public/css/m/charge.css">
</head>

<body>
    <div class="n-page">
        <div class="new-header flex">
            <div class="back-box">
                <img src="/public/images/m/back.png" alt="" class="left-back-icon">
            </div>
            <span class="header-title flex-child-box">充值</span>
        </div>
        <div class="content txt-content">
            <div class="user-msg-box flex" id="J_userInfo"></div>
            <div class="pay-money-box flex">
                <div class="charge-money" data-money="50">
                    <span class="s-money">50赏币</span>
                    <span class="china-money">￥50</span>
                </div>
                <div class="charge-money" data-money="100">
                    <span class="s-money">120赏币</span>
                    <span class="china-money">￥100</span>
                </div>
                <div class="charge-money" data-money="500">
                    <span class="s-money">650赏币</span>
                    <span class="china-money">￥500</span>
                </div>
                <div class="change-input">
                    <span class="other-money">其他金额</span>
                    <span class="hideclass" style="display:none">
                      <input type="text" class="change-input-money" autofocus="autofocus">
                  </span>
                </div>
            </div>
            <div class="pay-type">
                <p class="pay-type-title">支付方式：</p>
                <ul class="pay-type-box flex">
                    <li class="payment payment-type payment-wx flex-1 current-payment" data-type="wx"></li>
                    <li class="payment payment-type payment-alipay flex-1" data-type="alipay"></li>
                    <!-- <li class="payment payment-type payment-union"></li> -->
                </ul>
            </div>
            <div class="pay-btn">立即支付</div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/public/js/m/fontResize.js"></script>
    <script src="/public/lib/layer/layui.js"></script>
    <script src="/public/js/G.js"></script>
    <script src="/public/js/user.js"></script>
    <script src="/public/js/rechargeApi.js"></script>
    <script src="/public/js/rechargeOrder.js"></script>
    <script src="/public/js/m/public.js"></script>
    <script id="J_userInfo_tpl" type="text/html">
        <div class="user-header-box">
            <img src="/{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{d.userId}}.png">
        </div>
        <div class="username-box">
            <span class="name-title">用户名：{{d.username}}</span>
        </div>
        <div class="user-remain-box">
            剩余赏币：<span class="remain-total">{{d.balance}}</span>
        </div>
    </script>
</body>
<script>
    layui.use('laytpl', function() {
        var laytpl = layui.laytpl;

        isLogined('chargeMoney.html')
        if(isWxBrowser()){
            $('.payment-alipay').removeClass('payment').removeClass('payment-type ')
            $('.payment-wx').addClass('current-payment')
        }
        user.getInfo({}, function(data) {
            console.log(data)
            laytpl($('#J_userInfo_tpl').html()).render(data, function(html) {
                $('#J_userInfo').html(html)
            })
        })

    })
    // 切换效果
    $('.pay-money-box').on('click', 'div', function() {
        if ($(this).hasClass('change-input')) {
            $('.hideclass').show();
            $('.other-money').hide()
        } else {
            $('.hideclass').hide();
            $('.other-money').show()
        }
        $(this).addClass('pay-active').siblings().removeClass('pay-active')
    })
    $(document).on('click','.payment',function(){
        $(this).siblings('.current-payment').removeClass('current-payment');
        $(this).addClass('current-payment')
    })
    $(document).on('click','.pay-btn',function(){
        if(!$('.pay-active').length){
            alert('请选择充值金额')
        }
        var isOtherMoney = $('.change-input').hasClass('pay-active');
        var payType = $('.current-payment').data('type');
        var payMoney;
        if(isOtherMoney){
            payMoney = $('.change-input-money').val()
        }else{
            payMoney = $('.pay-active').data('money')
        }
        console.log(payMoney)
        if(!/^[0-9]\d*(\.\d+)?$/.exec(payMoney)){
            alert('请输入正确的充值金额！')
            $('.change-input-money').val('').focus()
            return;
        }
        if(payType == 'alipay'){
            rechargeApi.create(payMoney,{},function(data) {
                orderId = data.rechargeOrderId;
                var url = rechargeOrder.getUrl('alipay',orderId,'wap');
                location.href = url;
            });
        }else if(payType == 'wx'){
            rechargeApi.create(payMoney,{},function(data) {
                orderId = data.rechargeOrderId;
                if(isWxBrowser()) {
                    rechargeOrder.createOrder('wx','wxInnerH5',orderId,function(res){
                        console.log(res)
                        wxApppay(res,function(){
                            alert('充值成功！');
                            location.reload()
                        })
                    },function(e){
                        alert(e)
                        console.log(e)
                    },{
                        'OPEN-ID': sessionStorage.getItem('openid')
                    })
                }else{
                    rechargeOrder.createOrder('wx','wap',orderId,function(res){
                        console.log(res)
                        location.href = res.mwebUrl;
                        //调用微信的同时弹窗询问是否支付完成，支付完成然后添加
                    },function(e){
                        alert(e)
                        console.log(e)
                    })
                }
            })
        }
    })
</script>

</html>